<template>
  <div>
    <!--文件列表-->
    <Row>
      <Col span="6" v-for="(item,key) in data" :key="key" :gutter="16" style="margin: 16px 0px;min-height: 120px">
        <div style="text-align: center">
          <span class="icon-file" v-if="getFileType(item.name)=='unKnow'" style="font-size: 40px"></span>
          <span class="icon-Microsoft-Excel" v-if="getFileType(item.name)=='xls'||getFileType(item.name)=='xlsx'"
                style="font-size: 40px"></span>
          <span class="icon-jpg" v-if="getFileType(item.name)=='jpg'||getFileType(item.name)=='png'"
                style="font-size: 40px">
          </span>
          <span class="icon-pdf" v-if="getFileType(item.name)=='pdf'" style="font-size: 40px">
          </span>
          <span class="icon-TXT" v-if="getFileType(item.name)=='txt'" style="font-size: 40px">
          </span>
          <span class="icon-WORD" v-if="getFileType(item.name)=='doc'||getFileType(item.name)=='docx'"
                style="font-size: 40px">
          </span>
          <span class="icon-zip" v-if="getFileType(item.name)=='zip'||getFileType(item.name)=='rar'"
                style="font-size: 40px">
          </span>
        </div>
        <div><span class="title">
            <a @click="startDownload(item.id)">{{item.name}}</a>
            <div style="margin-top: 5px">
                <Button v-if="isPdf(item.name)||isTxt(item.name)||isImg(item.name)||isOffice(item.name)" shape="circle" icon="md-eye"
                        @click="preview(item.id,item.name)">
                </Button>
            </div>
          </span></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { downloadAppendix } from '../../api/sys/appendix'
import { previewFile } from '../../libs/preview'

export default {
  name: 'file-table',
  data: function () {
    return {
      office: ''
    }
  },
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    getFileType (name) {
      let allowsSuffix = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'zip', 'rar', 'txt']
      let suffix = name.substring(name.lastIndexOf('.') + 1, name.length)
      for (let i = 0; i < allowsSuffix.length; i++) {
        if (suffix.toLowerCase() === allowsSuffix[i]) {
          return allowsSuffix[i]
        }
      }
      return 'unKnow'
    },
    startDownload (id) {
      downloadAppendix(id).then(res => {
      })
    },
    preview (id, name) {
      previewFile(id, name, true)
    },
    isImg (name) {
      let suffix = name.substring(name.lastIndexOf('.') + 1, name.length)
      if (suffix === 'jpg' || suffix === 'png' || suffix === 'jpeg') {
        return true
      }
      return false
    },
    isTxt (name) {
      let suffix = name.substring(name.lastIndexOf('.') + 1, name.length)
      if (suffix === 'txt') {
        return true
      }
      return false
    },
    isPdf (name) {
      let suffix = name.substring(name.lastIndexOf('.') + 1, name.length)
      if (suffix === 'pdf') {
        return true
      }
      return false
    },
    isOffice (name) {
      let suffix = name.substring(name.lastIndexOf('.') + 1, name.length).toLowerCase()
      if (suffix === 'doc' || suffix === 'docx' || suffix === 'xls' || suffix === 'xlsx' || suffix === 'ppt' || suffix === 'pptx') {
        return true
      }
      return false
    },
    init () {
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
  .title {
    width: 100%;
    padding-left: 23px;
    padding-right: 23px;
    height: auto;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-align: center;
    display: block;
  }
</style>
